<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>组件 · Twitter Bootstrap中文版/中文翻译</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="assets/css/docs.css" rel="stylesheet">
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
  </head>

  <body data-spy="scroll" data-target=".subnav" data-offset="50">


  <!-- Navbar
    ================================================== -->
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="index.html">Bootstrap</a>
          <div class="nav-collapse">
	    <ul class="nav">
              <li class="">
                <a href="index.html">概述</a>
              </li>
              <li class="">
                <a href="scaffolding.html">框架</a>
              </li>
              <li class="">
                <a href="base-css.html">基础CSS</a>
              </li>
              <li class="active">
                <a href="components.html">组件</a>
              </li>
              <li class="">
                <a href="javascript.html">Javascript插件</a>
              </li>
              <li class="">
                <a href="less.html">使用LESS</a>
              </li>
              <li class="divider-vertical"></li>
              <li class="">
                <a href="download.html">定制</a>
              </li>
              <li class="">
                <a href="examples.html">例子</a>
              </li>
	      <li class="">
                <a href="wrongway.html">译者言</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container">

<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <h1>组件</h1>
  <p class="lead">
    Bootstrap内置几十种高可用的组件，以实现导航栏，通知，弹出框等功能。
  </p>
  <div class="subnav">
    <ul class="nav nav-pills">
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="components.html#">按钮 <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="components.html#buttonGroups">按钮组</a></li>
          <li><a href="components.html#buttonDropdowns">下拉按钮</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="components.html#">导航 <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="components.html#navs">导航，标签页，胶囊链接</a></li>
          <li><a href="components.html#navbar">导航条</a></li>
          <li><a href="components.html#breadcrumbs">面包屑导航栏</a></li>
          <li><a href="components.html#pagination">分页</a></li>
        </ul>
      </li>
      <li><a href="components.html#labels">标签</a></li>
      <li><a href="components.html#badges">标记</a></li>
      <li><a href="components.html#typography">排版</a></li>
      <li><a href="components.html#thumbnails">缩略图</a></li>
      <li><a href="components.html#alerts">警告</a></li>
      <li><a href="components.html#progress">进度条</a></li>
      <li><a href="components.html#misc">杂项</a></li>
    </ul>
  </div>
</header>



<!-- Button Groups
================================================== -->
<section id="buttonGroups">
  <div class="page-header">
    <h1>按钮组 <small>添加更多按钮，实现类似工具条功能</small></h1>
  </div>
  <div class="row">
    <div class="span4">
      <h3>按钮组</h3>
      <p>
	按钮组可以将多个按钮做为一个复合组件来用。
	由一系列 <code>&lt;a&gt;</code> 或 <code>&lt;button&gt;</code> 元素构建。
      </p>
      <h3>最佳实践</h3>
      <p>
	我们建议使用按钮组和工具条时应遵循下列准则：
      </p>
      <ul>
        <li>
	  在一个按钮组中只使用一种元素， <code>&lt;a&gt;</code> 或 <code>&lt;button&gt;</code> 。
	</li>
        <li>
	  不要在同一个按钮组中使用不同按钮颜色。
	</li>
        <li>
	  使用图标补充内容或直接替代文本时，应包含说明性的alt或title文字。
	</li>
      </ul>
      <p><span class="label label-info">补充</span> 
	下面会单独强调带下拉框的按钮组，其包含一个下拉/上弹三角以表示可点击触发下拉/上弹。
      </p>
    </div>
    <div class="span4">
      <h3>默认例子</h3>
      <p>
	用 <code>button</code> 标签按钮构建的标准按钮组：
      </p>
      <div class="">
        <div class="btn-group" style="margin: 9px 0;">
          <button class="btn">左</button>
          <button class="btn">中</button>
          <button class="btn">右</button>
        </div>
      </div>
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
  &lt;button class="btn"&gt;1&lt;/button&gt;
  &lt;button class="btn"&gt;2&lt;/button&gt;
  &lt;button class="btn"&gt;3&lt;/button&gt;
&lt;/div&gt;
</pre>
      <h3>工具条的例子</h3>
      <p>
	集合几组 <code>&lt;div class="btn-group"&gt;</code> ，再用 <code>&lt;div class="btn-toolbar"&gt;</code> 包装就可以合成工具条组件。
      </p>
      <div class="btn-toolbar">
        <div class="btn-group">
          <button class="btn">1</button>
          <button class="btn">2</button>
          <button class="btn">3</button>
          <button class="btn">4</button>
        </div>
        <div class="btn-group">
          <button class="btn">5</button>
          <button class="btn">6</button>
          <button class="btn">7</button>
        </div>
        <div class="btn-group">
          <button class="btn">8</button>
        </div>
      </div>
<pre class="prettyprint linenums">
&lt;div class="btn-toolbar"&gt;
  &lt;div class="btn-group"&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;
</pre>
    </div>
    <div class="span4">
      <h3>复选和单选形式</h3>
      <p>
	按钮组也可实现单选和复选功能。前者只有一个按钮被按下，后者可以按下多个按钮。详见<a href="javascript.html#buttons">Javascript插件</a> 。
      </p>
      <p><a class="btn js-btn" href="javascript.html#buttons">获取相关的javascript &raquo;</a></p>
      <h3>按钮组中的下拉项</h3>
      <p><span class="label label-info">强调!</span> 
	为了渲染正常，带下拉项的按钮应该被 <code>.btn-group</code> 嵌套，然后再放入 <code>.btn-toolbar</code> 内。
      </p>
    </div>
  </div>
</section>



<!-- Split button dropdowns
================================================== -->
<section id="buttonDropdowns">
  <div class="page-header">
    <h1>按钮下拉菜单 <small>基于按钮组提供下拉菜单</small></h1>
  </div>

  <h2>下拉按钮</h2>
  <div class="row">
    <div class="span4">
      <h3>简介和例子</h3>
      <p>
	下拉菜单中的按钮嵌套于 <code>.btn-group</code> 内。
      </p>
      <div class="btn-toolbar" style="margin-top: 18px;">
        <div class="btn-group">
          <button class="btn dropdown-toggle" data-toggle="dropdown">动作 <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">动作 <span class="caret"></span></button>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">危险 <span class="caret"></span></button>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
      </div>
      <div class="btn-toolbar">
        <div class="btn-group">
          <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">警告 <span class="caret"></span></button>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">成功 <span class="caret"></span></button>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">信息 <span class="caret"></span></button>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">逆操作 <span class="caret"></span></button>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
      </div><!-- /btn-toolbar -->
    </div>
    <div class="span8">
      <h3>标记例子</h3>
      <p>
	和按钮组类似，下拉按钮仍使用按钮标记，并用到少量其他标记以增强显示效果，同时支持Bootstrap的下拉jquery插件。
      </p>
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
  &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
    Action
    &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;ul class="dropdown-menu"&gt;
    &lt;!-- dropdown menu links --&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</pre>
    </div>
  </div>
  <div class="row">
    <div class="span4">
      <h3>适应所有按钮的尺寸</h3>
      <p>
	下拉按钮适应任何尺寸，可以是 <code>.btn-large</code>, <code>.btn-small</code>, 或 <code>.btn-mini</code> 。
      </p>
      <div class="btn-toolbar" style="margin-top: 18px;">
        <div class="btn-group">
          <button class="btn btn-large dropdown-toggle" data-toggle="dropdown">大按钮 <span class="caret"></span></button>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">小按钮 <span class="caret"></span></button>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">迷你按钮 <span class="caret"></span></button>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
      </div><!-- /btn-toolbar -->
    </div><!--/span-->
    <div class="span4">
      <h3>需要Javascript</h3>
      <p>
	下拉按钮需要 <a href="javascript.html#dropdowns">Bootstrap下拉插件</a> 实现功能。
      </p>
      <p>
	在某些情况下（诸如使用手机浏览），下拉菜单会超出可视区域。这时要么手动对齐，要么使用定制的javascript。
      </p>
    </div><!--/span-->
  </div><!--/row-->
  <br>

  <h2>带间隔的下拉按钮</h2>
  <div class="row">
    <div class="span4">
      <h3>简介和例子</h3>
      <p>
	在按钮组的样式和标记的基础上，我们可以很方便的创建带间隔的下拉按钮。间隔左侧是按钮，右侧是下拉链接。
      </p>
      <div class="btn-toolbar" style="margin-top: 18px;">
        <div class="btn-group">
          <button class="btn">动作</button>
          <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-primary">动作</button>
          <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-danger">危险</button>
          <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
      </div>
      <div class="btn-toolbar">
        <div class="btn-group">
          <button class="btn btn-warning">警告</button>
          <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-success">成功</button>
          <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-info">信息</button>
          <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
      </div>
      <div class="btn-toolbar">
        <div class="btn-group">
          <button class="btn btn-inverse">逆操作</button>
          <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
      </div><!-- /btn-toolbar -->
      <h3>尺寸</h3>
      <p>
	使用 <code>.btn-mini</code>, <code>.btn-small</code>, 和 <code>.btn-large</code> 指定大小。
      </p>
      <div class="btn-toolbar">
        <div class="btn-group">
          <button class="btn btn-large">大按钮</button>
          <button class="btn btn-large dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
      </div><!-- /btn-toolbar -->
      <div class="btn-toolbar">
        <div class="btn-group">
          <button class="btn btn-small">小按钮</button>
          <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
      </div><!-- /btn-toolbar -->
      <div class="btn-toolbar">
        <div class="btn-group">
          <button class="btn btn-mini">迷你按钮</button>
          <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
      </div><!-- /btn-toolbar -->
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
  ...
  &lt;ul class="dropdown-menu pull-right"&gt;
    &lt;!-- dropdown menu links --&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</pre>
    </div>
    <div class="span8">
      <h3>标记的例子</h3>
      <p>
	我们对普通的下拉按钮进行扩展，将下拉区域独立出来，可对其单独点击收放菜单。
      </p>
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
  &lt;button class="btn"&gt;Action&lt;/button&gt;
  &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
    &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;ul class="dropdown-menu"&gt;
    &lt;!-- dropdown menu links --&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</pre>
      <h3>上弹菜单</h3>
      <p>
	下拉菜单也可以变成上弹菜单，只要在 <code>.dropdown-menu</code> 最近的父标签上应用 <code>.dropup</code> 即可。它会改变
	 <code>.caret</code> 的箭头方向，并将菜单底部与按钮顶部对齐。
      <div class="btn-toolbar" style="margin-top: 9px;">
        <div class="btn-group dropup">
          <button class="btn">上弹按钮</button>
          <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group dropup">
          <button class="btn primary">上弹按钮(右对齐)</button>
          <button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu pull-right">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </div><!-- /btn-group -->
      </div>
<pre class="prettyprint linenums">
&lt;div class="btn-group dropup"&gt;
  &lt;button class="btn"&gt;Dropup&lt;/button&gt;
  &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
    &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;ul class="dropdown-menu"&gt;
    &lt;!-- dropdown menu links --&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</pre>

    </div>
  </div>
</section>



<!-- Nav, Tabs, & Pills
================================================== -->
<section id="navs">
  <div class="page-header">
    <h1>导航，标签页，胶囊链接 <small>定制性强的列表导航</small></h1>
  </div>

  <h2>轻巧的默认项 <small>同样的标记，不同的类</small></h2>
  <div class="row">
    <div class="span4">
      <h3>强大的基类</h3>
      <p>
	所有的导航组件，诸如标签页/胶囊链接/列表，<strong>使用同样的标记和样式</strong> - <code>.nav</code> 类。
      </p>
      <h3>何时适用</h3>
      <p>
	标签页和胶囊链接非常适合内容片段的切换，或是相关内容的页面导航。
      </p>
      <h3>组件对齐</h3>
      <p>
	使用 <code>.pull-left</code> 或 <code>.pull-right</code> 对齐导航链接，两者都依赖CSS float实现左/右对齐。
      </p>
    </div>
    <div class="span4">
      <h3>基本的标签页</h3>
      <p>
	对存放链接的 <code>&lt;ul&gt;</code> 应用 <code>.nav-tabs</code> ：
      </p>
      <ul class="nav nav-tabs">
        <li class="active"><a href="components.html#">首页</a></li>
        <li><a href="components.html#">介绍</a></li>
        <li><a href="components.html#">消息</a></li>
      </ul>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-tabs"&gt;
  &lt;li class="active"&gt;
    &lt;a href="#"&gt;首页&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
    </div>
    <div class="span4">
      <h3>基本的胶囊链接</h3>
      <p>
	HTML不变，使用 <code>.nav-pills</code> ：
      </p>
      <ul class="nav nav-pills">
        <li class="active"><a href="components.html#">首页</a></li>
        <li><a href="components.html#">介绍</a></li>
        <li><a href="components.html#">消息</a></li>
      </ul>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-pills"&gt;
  &lt;li class="active"&gt;
    &lt;a href="#"&gt;首页&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
    </div>
  </div>

  <h2>叠放式导航 <small>竖直排放标签和胶囊链接</small></h2>
  <div class="row">
    <div class="span4">
      <h3>如何叠放</h3>
      <p>
	默认情况下标签和胶囊链接是水平排放的，使用 <code>.nav-stacked</code> 就可以将其变成竖直叠放。
      </p>
    </div>
    <div class="span4">
      <h3>叠放式标签</h3>
      <ul class="nav nav-tabs nav-stacked">
        <li class="active"><a href="components.html#">首页</a></li>
        <li><a href="components.html#">介绍</a></li>
        <li><a href="components.html#">消息</a></li>
      </ul>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-tabs nav-stacked"&gt;
  ...
&lt;/ul&gt;
</pre>
    </div>
    <div class="span4">
      <h3>叠放式胶囊链接</h3>
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="components.html#">首页</a></li>
        <li><a href="components.html#">介绍</a></li>
        <li><a href="components.html#">消息</a></li>
      </ul>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-pills nav-stacked"&gt;
  ...
&lt;/ul&gt;
</pre>
    </div>
  </div>

  <h2>下拉项 <small>改良的导航组件</small></h2>
  <div class="row">
    <div class="span4">
      <h3>易用的富内容菜单</h3>
      <p>
	在Bootstrap中，创建标签和胶囊链接中的下拉菜单非常方便，仅需极少的HTML和一个轻巧的jQuery插件。
      </p>
      <p>
	详见 <a href="javascript.html#tabs">初始化下拉项</a> 。
      </p>
    </div>
    <div class="span4">
      <h3>带下拉项的标签页</h3>
      <ul class="nav nav-tabs">
        <li class="active"><a href="components.html#">首页</a></li>
        <li><a href="components.html#">帮助</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="components.html#">下拉 <b class="caret"></b></a>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="components.html#">上弹 <b class="caret bottom-up"></b></a>
          <ul class="dropdown-menu bottom-up pull-right">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </li>
      </ul>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-tabs"&gt;
  &lt;li class="dropdown"&gt;
    &lt;a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#"&gt;
        下拉
        &lt;b class="caret"&gt;&lt;/b&gt;
      &lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;!-- links --&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</pre>
    </div>
    <div class="span4">
      <h3>带下拉的胶囊链接</h3>
      <ul class="nav nav-pills">
        <li class="active"><a href="components.html#">首页</a></li>
        <li><a href="components.html#">帮助</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="components.html#">下拉 <b class="caret"></b></a>
          <ul class="dropdown-menu">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="components.html#">上弹 <b class="caret bottom-up"></b></a>
          <ul class="dropdown-menu bottom-up pull-right">
	    <li><a href="components.html#">动作</a></li>
            <li><a href="components.html#">其他动作</a></li>
            <li><a href="components.html#">其他</a></li>
            <li class="divider"></li>
            <li><a href="components.html#">被间隔的链接</a></li>
          </ul>
        </li>
      </ul>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-pills"&gt;
  &lt;li class="dropdown"&gt;
    &lt;a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#"&gt;
        下拉
        &lt;b class="caret"&gt;&lt;/b&gt;
      &lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;!-- links --&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</pre>
    </div>
  </div>

  <h2>导航列表 <small>构建简单的叠放式导航，适用于侧边栏</small></h2>
  <div class="row">
    <div class="span4">
      <h3>应用风格（application-style）的导航</h3>
      <p>
	导航列表可以便捷地创建带有标头(可选)的导航链接组，非常适合用做侧边栏（与OS X中的Finder类似）。
      </p>
      <p>
	从结构上看，其与标签和胶囊链接无异，都使用同样的导航样式，所以用法和定制都一样简洁。
      </p>
      <hr>
      <h4>使用图标</h4>
      <p>
	在导航列表中使用图标很容易。只须添加带有图标类的 <code>&lt;i&gt;</code> 标签即可。
      </p>
      <h4>水平间隔</h4>
      <p>
	应用 <code>.divider</code> 的空列表项会显示为一个水平间隔，如下：
      </p>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-list"&gt;
  ...
  &lt;li class="divider"&gt;&lt;/li&gt;
  ...
&lt;/ul&gt;
</pre>
    </div>
    <div class="span4">
      <h3>导航列表例子</h3>
      <p>对存放一组链接的列表使用 <code>class="nav nav-list"</code> :</p>
      <div class="well" style="padding: 8px 0;">
        <ul class="nav nav-list">
          <li class="nav-header">列表头</li>
          <li class="active"><a href="components.html#">首页</a></li>
          <li><a href="components.html#">类库</a></li>
          <li><a href="components.html#">应用</a></li>
          <li class="nav-header">另一个列表头</li>
          <li><a href="components.html#">介绍</a></li>
          <li><a href="components.html#">设置</a></li>
          <li class="divider"></li>
          <li><a href="components.html#">帮助</a></li>
        </ul>
      </div> <!-- /well -->
<pre class="prettyprint linenums">
&lt;ul class="nav nav-list"&gt;
  &lt;li class="nav-header"&gt;
    列表头
  &lt;/li&gt;
  &lt;li class="active"&gt;
    &lt;a href="#"&gt;首页&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#"&gt;类库&lt;/a&gt;
  &lt;/li&gt;
  ...
&lt;/ul&gt;
</pre>
    </div>
    <div class="span4">
      <h3>使用图标的例子</h3>
      <p>
	同样的例子，使用 <code>&lt;i&gt;</code> 标签显示图标。
      </p>
      <div class="well" style="padding: 8px 0;">
        <ul class="nav nav-list">
          <li class="nav-header">列表头</li>
          <li class="active"><a href="components.html#"><i class="icon-white icon-home"></i> 首页</a></li>
          <li><a href="components.html#"><i class="icon-book"></i> 类库</a></li>
          <li><a href="components.html#"><i class="icon-pencil"></i> 应用</a></li>
          <li class="nav-header">另一个列表头</li>
          <li><a href="components.html#"><i class="icon-user"></i> 介绍</a></li>
          <li><a href="components.html#"><i class="icon-cog"></i> 设置</a></li>
          <li class="divider"></li>
          <li><a href="components.html#"><i class="icon-flag"></i> 帮助</a></li>
        </ul>
      </div> <!-- /well -->
<pre class="prettyprint linenums">
&lt;ul class="nav nav-list"&gt;
  ...
  &lt;li&gt;
    &lt;a href="#"&gt;
      &lt;i class="icon-book"&gt;&lt;/i&gt;
      类库
    &lt;/a&gt;
  &lt;/li&gt;
  ...
&lt;/ul&gt;
</pre>
    </div>
  </div>


  <h2>标签页切换导航 <small>通过javascript让标签生动起来</small></h2>
  <div class="row">
    <div class="span4">
      <h3>包含哪些东西</h3>
      <p>
	我们使用一个简单的插件切换标签页对应的内容，从而让标签页变得生动。
	Bootstrap 提供了四种样式的标签页：置顶(默认)，居右，置底，居左。
      </p>
      <p>
	应用时只需修改很少的标记。
      </p>
    </div>
    <div class="span4">
      <h3>标签页切换的例子</h3>
      <p>
	用带 <code>.tabbable</code> 的div将 <code>.nav-tabs</code> 嵌套起来：
      </p>
      <div class="tabbable" style="margin-bottom: 9px;">
        <ul class="nav nav-tabs">
          <li class="active"><a href="components.html#1" data-toggle="tab">段 1</a></li>
          <li><a href="components.html#2" data-toggle="tab">段 2</a></li>
          <li><a href="components.html#3" data-toggle="tab">段 3</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="1">
            <p>这里是段1</p>
          </div>
          <div class="tab-pane" id="2">
            <p>这里是段2</p>
          </div>
          <div class="tab-pane" id="3">
            <p>这里是段3</p>
          </div>
        </div>
      </div> <!-- /tabbable -->
    </div>
    <div class="span4">
      <h3>定制jQuery插件</h3>
      <p>
	所有标签页都依赖我们提供的轻量级jQuery插件。详见javascript中的关于标签页部分的文档。
      </p>
      <p><a class="btn" href="javascript.html#tabs">获取javascript &rarr;</a></p>
    </div>
  </div>

  <h3>简洁的标读</h3>
  <p>
    使用标签切换页，需要一个最外层的div，一组标签，以及一组存放内容的容器
  </p>
<pre class="prettyprint linenums">
&lt;div class="tabbable"&gt;
  &lt;ul class="nav nav-tabs"&gt;
    &lt;li class="active"&gt;&lt;a href="#1" data-toggle="tab"&gt;章节 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#2" data-toggle="tab"&gt;章节 2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="tab-content"&gt;
    &lt;div class="tab-pane active" id="1"&gt;
      &lt;p&gt;这里是章节 1.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="tab-pane" id="2"&gt;
      &lt;p&gt;这里是章节 2.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

  <h3>在多个方向上使用标签切换页</h3>
  <div class="row">
    <div class="span4">
      <h4>标签置底</h4>
      <p>
	反转HTML的顺序，用 <code>.tabs-below</code> 将标签居底。
      </p>
      <div class="tabbable tabs-below">
        <div class="tab-content">
          <div class="tab-pane active" id="A">
            <p>这里是章节A</p>
          </div>
          <div class="tab-pane" id="B">
            <p>这里是章节B</p>
          </div>
          <div class="tab-pane" id="C">
            <p>这里是章节C</p>
          </div>
        </div>
        <ul class="nav nav-tabs">
          <li class="active"><a href="components.html#A" data-toggle="tab">第1节</a></li>
          <li><a href="components.html#B" data-toggle="tab">第2节</a></li>
          <li><a href="components.html#C" data-toggle="tab">第3节</a></li>
        </ul>
      </div> <!-- /tabbable -->
<pre class="prettyprint linenums" style="margin-top: 11px;">
&lt;div class="tabbable tabs-below"&gt;
  &lt;div class="tab-content"&gt;
    ...
  &lt;/div&gt;
  &lt;ul class="nav nav-tabs"&gt;
    ...
  &lt;/ul&gt;
&lt;/div&gt;
</pre>
    </div>
    <div class="span4">
      <h4>标签居左</h4>
      <p>
	使用 <code>.tabs-left</code> 将标签居左。
      </p>
      <div class="tabbable tabs-left">
        <ul class="nav nav-tabs">
          <li class="active"><a href="components.html#lA" data-toggle="tab">第1节</a></li>
          <li><a href="components.html#lB" data-toggle="tab">第2节</a></li>
          <li><a href="components.html#lC" data-toggle="tab">第3节</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="lA">
            <p>这里是章节A</p>
          </div>
          <div class="tab-pane" id="lB">
            <p>这里是章节B</p>
          </div>
          <div class="tab-pane" id="lC">
            <p>这里是章节C</p>
          </div>
        </div>
      </div> <!-- /tabbable -->
<pre class="prettyprint linenums">
&lt;div class="tabbable tabs-left"&gt;
  &lt;ul class="nav nav-tabs"&gt;
    ...
  &lt;/ul&gt;
  &lt;div class="tab-content"&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;
</pre>
    </div>
    <div class="span4">
      <h4>标签居右</h4>
      <p>
	使用 <code>.tabs-right</code> 将标签居右。
      </p>
      <div class="tabbable tabs-right">
        <ul class="nav nav-tabs">
          <li class="active"><a href="components.html#rA" data-toggle="tab">第1节</a></li>
          <li><a href="components.html#rB" data-toggle="tab">第2节</a></li>
          <li><a href="components.html#rC" data-toggle="tab">第3节</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="rA">
            <p>这里是章节A</p>
          </div>
          <div class="tab-pane" id="rB">
            <p>这里是章节B</p>
          </div>
          <div class="tab-pane" id="rC">
            <p>这里是章节C</p>
          </div>
        </div>
      </div> <!-- /tabbable -->
<pre class="prettyprint linenums">
&lt;div class="tabbable tabs-right"&gt;
  &lt;ul class="nav nav-tabs"&gt;
    ...
  &lt;/ul&gt;
  &lt;div class="tab-content"&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;
</pre>
    </div>
  </div>

</section>



<!-- Navbar
================================================== -->
<section id="navbar">
  <div class="page-header">
    <h1>导航条</h1>
  </div>
  <h2>静态导航条的例子</h2>
  <p>
    带有项目名称，导航和搜索表单的静态导航条的例子。
  </p>
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="components.html#">项目名称</a>
        <div class="nav-collapse">
          <ul class="nav">
            <li class="active"><a href="components.html#">首页</a></li>
            <li><a href="components.html#">链接</a></li>
            <li><a href="components.html#">链接</a></li>
            <li><a href="components.html#">链接</a></li>
            <li class="dropdown">
              <a href="components.html#" class="dropdown-toggle" data-toggle="dropdown">下拉 <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="components.html#">动作</a></li>
                <li><a href="components.html#">另一个动作</a></li>
                <li><a href="components.html#">其他动作</a></li>
                <li class="divider"></li>
                <li class="nav-header">导航头</li>
                <li><a href="components.html#">被间隔的链接</a></li>
                <li><a href="components.html#">另一个链接</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-search pull-left" action="components.html">
            <input type="text" class="search-query span2" placeholder="搜索">
          </form>
          <ul class="nav pull-right">
            <li><a href="components.html#">链接</a></li>
            <li class="divider-vertical"></li>
            <li class="dropdown">
              <a href="components.html#" class="dropdown-toggle" data-toggle="dropdown">下拉 <b class="caret"></b></a>
              <ul class="dropdown-menu">
		<li><a href="components.html#">动作</a></li>
                <li><a href="components.html#">另一个动作</a></li>
                <li><a href="components.html#">其他动作</a></li>
                <li class="divider"></li>
                <li class="nav-header">导航头</li>
                <li><a href="components.html#">被间隔的链接</a></li>
                <li><a href="components.html#">另一个链接</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div>
    </div><!-- /navbar-inner -->
  </div><!-- /navbar -->

  <div class="row">
    <div class="span8">
      <h3>导航条基本框架</h3>
      <p>
	需要少量的div来构建静态static或是固定fixed的导航条。
      </p>
<pre class="prettyprint linenums">
&lt;div class="navbar"&gt;
  &lt;div class="navbar-inner"&gt;
    &lt;div class="container"&gt;
      ...
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
      <h3>固定导航条</h3>
      <p>
	只要在最外层的div上应用 <code>.navbar</code> ，就可以将导航条固定到顶部或是底部。
      </p>
      <div class="row">
        <div class="span4">
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-top"&gt;
  ...
&lt;/div&gt;
</pre>
        </div><!--/span-->
        <div class="span4">
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-bottom"&gt;
  ...
&lt;/div&gt;
</pre>
        </div><!--/span-->
      </div><!--/row-->
      <p>
	附着导航条时，一定要留出一块空白区域，在 <code>&lt;body&gt;</code> 的顶端添加40px或是更多的padding。
	要保证将这段样式加在Bootstrap核心CSS之后，在响应式CSS（可选的）之前。
      </p>
      <h3>品牌名称</h3>
      <p>
	用于展示品牌或项目名称的一个简单链接，只需要一个锚标签。
      </p>
      <div class="navbar">
	<div class="navbar-inner">
	  <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </a>
            <a class="brand" href="components.html#">项目名称</a>
	  </div>
	</div>
      </div>
<pre class="prettyprint linenums">
&lt;a class="brand" href="#"&gt;
  品牌名称
&lt;/a&gt;
</pre>
      <h3>导航条中的表单</h3>
      <p>
	导航条内的表单，用 <code>.navbar-form</code> 进行样式化，由 <code>.pull-left</code> 或 <code>.pull-right</code> 决定居左还是居中。
      </p>
      <div class="navbar">
	<div class="navbar-inner">
	  <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </a>
            <a class="brand" href="components.html#">项目名称</a>
	    <div class="nav-collapse">
              <ul class="nav">
		<li class="active"><a href="components.html#">首页</a></li>
		<li><a href="components.html#">链接</a></li>
		<li><a href="components.html#">链接</a></li>
		<li><a href="components.html#">链接</a></li>
              </ul>
	      <form class="navbar-form pull-left">
		<input type="text" class="span2">
	      </form>
	    </div>
	  </div>
	</div>
      </div>
<pre class="prettyprint linenums">
&lt;form class="navbar-form pull-left"&gt;
  &lt;input type="text" class="span2"&gt;
&lt;/form&gt;
</pre>
      <p>
	对导航栏应用 <code>.navbar-search</code> 的同时对其中的输入框使用 <code>.search-query</code> ，就会得到另一种搜索样式，从而增强搜索表单的可定制性。
      </p>
      <div class="navbar">
	<div class="navbar-inner">
	  <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </a>
            <a class="brand" href="components.html#">项目名称</a>
	    <div class="nav-collapse">
              <ul class="nav">
		<li class="active"><a href="components.html#">首页</a></li>
		<li><a href="components.html#">链接</a></li>
		<li><a href="components.html#">链接</a></li>
		<li><a href="components.html#">链接</a></li>
              </ul>
	      <form class="navbar-search pull-left">
		<input type="text" class="search-query" placeholder="Search">
	      </form>
	    </div>
	  </div>
	</div>
      </div>

<pre class="prettyprint linenums">
&lt;form class="navbar-search pull-left"&gt;
  &lt;input type="text" class="search-query" placeholder="Search"&gt;
&lt;/form&gt;
</pre>
      <h3>响应性的补充（可选）</h3>
      <p>
	如果我们想根据置顶导航条中的不同内容实现响应性设计，就可以将导航内容嵌套在一个 <code>.nav-collapse.collapse</code> div容器中，并对按钮都应用 <code>.btn-navbar</code> 类。
      </p>
<pre class="prettyprint linenums">
&lt;div class="navbar"&gt;
  &lt;div class="navbar-inner"&gt;
    &lt;div class="container"&gt;

      &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
      &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/a&gt;

      &lt;!-- Be sure to leave the brand out there if you want it shown --&gt;
      &lt;a class="brand" href="#"&gt;Project name&lt;/a&gt;

      &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
      &lt;div class="nav-collapse"&gt;
        &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
      &lt;/div&gt;

    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
      <div class="alert alert-info">
        <strong>强调！</strong> 响应式导航条需要 <a href="javascript.html#collapse">切换插件</a>。
      </div>

    </div><!-- /.span -->
    <div class="span4">
      <h3>导航链接</h3>
      <p>导航项与无序列表非常相似。</p>
<pre class="prettyprint linenums">
&lt;ul class="nav"&gt;
  &lt;li class="active"&gt;
    &lt;a href="#">首页&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;链接&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;链接&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
      <p>
	将应用 <code>.divider-vertical</code> 的空列表项插入到两个链接项之间，就会得到分隔条：
      </p>
<pre class="prettyprint linenums">
&lt;ul class="nav"&gt;
  ...
  &lt;li class="divider-vertical"&gt;&lt;/li&gt;
  ...
&lt;/ul&gt;
</pre>
      <h3>组件对齐</h3>
      <p>
	我们使用 <code>.pull-left</code> 或 <code>.pull-right</code> 对齐链接，搜索表单或是文本。这两个类都使用CSS浮动进行对齐。
      </p>
      <h3>添加下拉菜单</h3>
      <p>
	在导航中很容易添加上下拉菜单，要用到 <a href="http://wrongwaycn.github.com/bootstrap/docs/javascript.html/#dropdown">下拉javascript插件</a> 。
      </p>
<pre class="prettyprint linenums">
&lt;ul class="nav"&gt;
  &lt;li class="dropdown"&gt;
    &lt;a href="#"
          class="dropdown-toggle"
          data-toggle="dropdown">
          帐户
          &lt;b class="caret"&gt;&lt;/b&gt;
    &lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
      ...
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</pre>
      <p><a class="btn" href="javascript.html#dropdowns">下载相关javascript &rarr;</a></p>
      <hr>
      <h3>导航条中的文本</h3>
      <p>
	在导航条中用 <code>&lt;p&gt;</code> 标签包装文本以设置行高和颜色。
      </p>
    </div><!-- /.span -->
  </div><!-- /.row -->

</section>



<!-- Breadcrumbs
================================================== -->
<section id="breadcrumbs">
  <div class="page-header">
    <h1>面包屑导航条 <small></small></h1>
  </div>

  <div class="row">
    <div class="span6">
      <h3>为什么使用面包屑导航条</h3>
      <p>
	面包屑导航栏用于展示用户当前在网站/应用中的位置，但并不是首要导航。适宜布局清爽，简洁明了的场合。
      </p>

      <h3>例子</h3>
      <p>
	一个简单的例子，可以用在多个页面中。
      </p>
      <ul class="breadcrumb">
        <li class="active">首页</li>
      </ul>
      <ul class="breadcrumb">
        <li><a href="components.html#">首页</a> <span class="divider">/</span></li>
        <li class="active">类库</li>
      </ul>
      <ul class="breadcrumb">
        <li><a href="components.html#">首页</a> <span class="divider">/</span></li>
        <li><a href="components.html#">类库</a> <span class="divider">/</span></li>
        <li class="active">数据</li>
      </ul>
    </div>
    <div class="span6">
      <h3>标记</h3>
      <p>
	使用无序号的ul列表。
      </p>
<pre class="prettyprint linenums">
&lt;ul class="breadcrumb"&gt;
  &lt;li&gt;
    &lt;a href="#"&gt;首页&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#"&gt;类库&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
  &lt;/li&gt;
  &lt;li class="active"&gt;数据&lt;/li&gt;
&lt;/ul&gt;
</pre>
    </div>
  </div>

</section>



<!-- Pagination
================================================== -->
<section id="pagination">
  <div class="page-header">
    <h1>页码 <small>使用两个参数对内容进行分页</small></h1>
  </div>

  <h2>多页码分页</h2>
  <div class="row">
    <div class="span4">
      <h3>何时适用</h3>
      <p>
	受Rdio启发，我们设计了极为简致的页码样式，适用于应用和搜索结果。页码区域尺寸大，易于吸引注意力，易于扩展，易于点击。
      </p>
      <h3>页码链接的状态</h3>
      <p>
	Bootstrap使用一组样式类定制页码的状态，<code>.disabled</code> 用于不可点击链接，而 <code>.active</code> 用于表示当前页链接。
      </p>
      <h3>灵活的对齐方式</h3>
      <p>
	使用 <code>.pagination-centered</code> 和 <code>.pagination-right</code> 可以改变页码的对齐方式，前者居中，后者居右。
      </p>
    </div>
    <div class="span4">
      <h3>例子</h3>
      <p>
	默认的页码组件非常灵活，有多种展示形式。
      </p>
      <div class="pagination">
        <ul>
          <li class="disabled"><a href="components.html#">&laquo;</a></li>
          <li class="active"><a href="components.html#">1</a></li>
          <li><a href="components.html#">2</a></li>
          <li><a href="components.html#">3</a></li>
          <li><a href="components.html#">4</a></li>
          <li><a href="components.html#">&raquo;</a></li>
        </ul>
      </div>
      <div class="pagination">
        <ul>
          <li><a href="components.html#">&laquo;</a></li>
          <li><a href="components.html#">10</a></li>
          <li class="active"><a href="components.html#">11</a></li>
          <li><a href="components.html#">12</a></li>
          <li><a href="components.html#">&raquo;</a></li>
        </ul>
      </div>
      <div class="pagination">
        <ul>
          <li><a href="components.html#">&larr;</a></li>
          <li class="active"><a href="components.html#">10</a></li>
          <li class="disabled"><a href="components.html#">...</a></li>
          <li><a href="components.html#">20</a></li>
          <li><a href="components.html#">&rarr;</a></li>
        </ul>
      </div>
      <div class="pagination pagination-centered">
        <ul>
          <li class="active"><a href="components.html#">1</a></li>
          <li><a href="components.html#">2</a></li>
          <li><a href="components.html#">3</a></li>
          <li><a href="components.html#">4</a></li>
          <li><a href="components.html#">5</a></li>
        </ul>
      </div>
    </div>
    <div class="span4">
      <h3>标记</h3>
      <p>
	分页标记是一个嵌套在 <code>&lt;div&gt;</code> 中的 <code>&lt;ul&gt;</code> 。
      </p>
<pre class="prettyprint linenums">
&lt;div class="pagination"&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;前一页&lt;/a&gt;&lt;/li>
    &lt;li class="active"&gt;
      &lt;a href="#"&gt;1&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;后一页&lt;/a&gt;&lt;/li>
  &lt;/ul&gt;
&lt;/div&gt;
</pre>
    </div>
  </div><!-- /row -->

  <h2>前后页 <small>简便的前一页/后一页链接</small></h2>
  <div class="row">
    <div class="span4">
      <h3>前后页组件介绍</h3>
      <p>
	前后页组件是一组简便的分页实现，标记更少，样式更轻，适用于轻量级网站，如博客或网志。
      </p>
      <h4>禁用状态</h4>
      <p>
	前后页链接仍使用 <code>.disabled</code> 设置无效状态。
      </p>
    </div>
    <div class="span4">
      <h3>默认的例子</h3>
      <p>默认情况下，前后页组件居中。</p>
      <ul class="pager">
        <li><a href="components.html#">前一页</a></li>
        <li><a href="components.html#">后一页</a></li>
      </ul>
<pre class="prettyprint linenums">
&lt;ul class="pager"&gt;
  &lt;li&gt;
    &lt;a href="#"&gt;前一页&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#"&gt;后一页&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</pre>
    </div>
    <div class="span4">
      <h3>居于左右端的链接</h3>
      <p>
	另一种情况下，链接分别居于左右端：
      </p>
      <ul class="pager">
        <li class="previous"><a href="components.html#">&larr; 过去的</a></li>
        <li class="next"><a href="components.html#">更新的 &rarr;</a></li>
      </ul>
<pre class="prettyprint linenums">
&lt;ul class="pager"&gt;
  &lt;li class="previous"&gt;
    &lt;a href="#"&gt;&amp;larr; 过去的&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="next"&gt;
    &lt;a href="#"&gt;更新的 &amp;rarr;&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</pre>
    </div>
  </div><!-- /row -->
</section>



<!-- Labels
================================================== -->
<section id="labels">
  <div class="page-header">
    <h1>行内标签 <small>标签和注释文本</small></h1>
  </div>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>标签</th>
        <th>标记</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <span class="label">默认</span>
        </td>
        <td>
          <code>&lt;span class="label"&gt;默认&lt;/span&gt;</code>
        </td>
      </tr>
      <tr>
        <td>
          <span class="label label-success">成功</span>
        </td>
        <td>
          <code>&lt;span class="label label-success"&gt;成功&lt;/span&gt;</code>
        </td>
      </tr>
      <tr>
        <td>
          <span class="label label-warning">警告</span>
        </td>
        <td>
          <code>&lt;span class="label label-warning"&gt;警告&lt;/span&gt;</code>
        </td>
      </tr>
      <tr>
        <td>
          <span class="label label-important">重要</span>
        </td>
        <td>
          <code>&lt;span class="label label-important"&gt;重要&lt;/span&gt;</code>
        </td>
      </tr>
      <tr>
        <td>
          <span class="label label-info">信息</span>
        </td>
        <td>
          <code>&lt;span class="label label-info"&gt;信息&lt;/span&gt;</code>
        </td>
      </tr>
      <tr>
        <td>
          <span class="label label-inverse">相反</span>
        </td>
        <td>
          <code>&lt;span class="label label-inverse"&gt;逆操作&lt;/span&gt;</code>
        </td>
      </tr>
    </tbody>
  </table>
</section>



<!-- Badges
================================================== -->
<section id="badges">
  <div class="page-header">
    <h1>标号 <small>标识和未读数量</small></h1>
  </div>
  <div class="row">
    <div class="span4">
      <h3>介绍</h3>
      <p>
	标号是用来显示标识或某某数量的简洁小组件。
	比如邮件客户端(比如Mail.app)中的邮件数量或是手机应用中的通知数量。
      </p>
    </div><!-- /.span -->
    <div class="span8">
      <h3>可用的类</h3>
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>名称</th>
            <th>例子</th>
            <th>标记</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              默认
            </td>
            <td>
              <span class="badge">1</span>
            </td>
            <td>
              <code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
            </td>
          </tr>
          <tr>
            <td>
              成功
            </td>
            <td>
              <span class="badge badge-success">2</span>
            </td>
            <td>
              <code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
            </td>
          </tr>
          <tr>
            <td>
              警告
            </td>
            <td>
              <span class="badge badge-warning">4</span>
            </td>
            <td>
              <code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
            </td>
          </tr>
          <tr>
            <td>
              错误
            </td>
            <td>
              <span class="badge badge-error">6</span>
            </td>
            <td>
              <code>&lt;span class="badge badge-error"&gt;6&lt;/span&gt;</code>
            </td>
          </tr>
          <tr>
            <td>
              信息
            </td>
            <td>
              <span class="badge badge-info">8</span>
            </td>
            <td>
              <code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
            </td>
          </tr>
          <tr>
            <td>
              相反
            </td>
            <td>
              <span class="badge badge-inverse">10</span>
            </td>
            <td>
              <code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
            </td>
          </tr>
        </tbody>
      </table>
    </div><!-- /.span -->
  </div><!-- /.row -->
</section>



<!-- Typographic components
================================================== -->
<section id="typography">
  <div class="page-header">
    <h1>排版组件 <small>用以分割内容的页标题和主角单元</small></h1>
  </div>
  <h2>主角单元</h2>
  <div class="row">
    <div class="span4">
      <p>
	Bootstrap提供了一个轻巧又灵活的组件，用以在网站中着重展示内容，称之为"hero unit"/主角单元。
	适用于市场类或强调内容的网站。
      </p>
      <h3>标记</h3>
      <p>
	将内容嵌套入应用 <code>.hero-unit</code>　的 <code>div</code> 中，如下:
      </p>
<pre class="prettyprint linenums">
&lt;div class="hero-unit"&gt;
  &lt;h1&gt;标题&lt;/h1&gt;
  &lt;p&gt;标签行&lt;/p&gt;
  &lt;p&gt;
    &lt;a class="btn btn-primary btn-large"&gt;
      了解更多
    &lt;/a&gt;
  &lt;/p&gt;
&lt;/div&gt;
</pre>
    </div>
    <div class="span8">
      <div class="hero-unit">
        <h1>陈光诚，汉子！</h1>
        <p>
	  主角单元Hero Unit是一简单的大屏组件，用于增强内容或信息的吸引力
	</p>
        <p><a class="btn btn-primary btn-large">了解更多</a></p>
      </div>
    </div>
  </div><!-- /row -->
  <h2>页面标题</h2>
  <div class="row">
    <div class="span4">
      <p>
	相当于一个简单的 <code>h1</code> 外壳，它有适当的留白，以便在页面中分割内容片段。
	还可以在 <code>h1</code> 内嵌入 <code>small</code> ，html元素或是其他组件。
      </p>
    </div>
    <div class="span8">
      <div class="page-header">
        <h1>页面标题的例子 <small>子标题文字</small></h1>
      </div>
<pre class="prettyprint linenums">
&lt;div class="page-header"&gt;
  &lt;h1&gt;页面标题例子&lt;/h1&gt;
&lt;/div&gt;
</pre>
    </div>
  </div><!-- /row -->
</section>



<!-- Thumbnails
================================================== -->
<section id="thumbnails">
  <div class="page-header">
    <h1>缩略项 <small>基于栅格的图象，视频，文字等等</small></h1>
  </div>

  <div class="row">
    <div class="span6">
      <h2>默认缩略项</h2>
      <p>
	默认情况下，Bootstrap的缩略项使用很少的标记来展示链接图象。
      </p>
      <ul class="thumbnails">
        <li class="span3">
          <a href="components.html#" class="thumbnail">
            <img src="http://placehold.it/260x180" alt="">
          </a>
        </li>
        <li class="span3">
          <a href="components.html#" class="thumbnail">
            <img src="http://placehold.it/260x180" alt="">
          </a>
        </li>
        <li class="span3">
          <a href="components.html#" class="thumbnail">
            <img src="http://placehold.it/260x180" alt="">
          </a>
        </li>
        <li class="span3">
          <a href="components.html#" class="thumbnail">
            <img src="http://placehold.it/260x180" alt="">
          </a>
        </li>
      </ul>
    </div>
    <div class="span6">
      <h2>高可定制</h2>
      <p>
	使用少量其他标记就可以在缩略项中添加任何一种HTML内容，比如标题，段落，或按钮。
      </p>
      <ul class="thumbnails">
        <li class="span3">
          <div class="thumbnail">
            <img src="http://placehold.it/260x180" alt="">
            <div class="caption">
              <h5>缩略项标签</h5>
              <p>
		余华:文章怎么写很重要，怎么读也很重要。有时候将无耻的文章反过来读，也能读到真理的语句。比如陈光诚事件，官方媒体一律指责，可是陈光诚究竟做了什么，他们只字未提。今天《北京日报》发表《从陈光诚事件看美国政客的拙劣表演》的文章里说：“13亿中国人并没有那么好瞒哄”……这句话是真理。
	      </p>
              <p><a href="components.html#" class="btn btn-primary">动作</a> <a href="components.html#" class="btn">动作</a></p>
            </div>
          </div>
        </li>
        <li class="span3">
          <div class="thumbnail">
            <img src="http://placehold.it/260x180" alt="">
            <div class="caption">
              <h5>缩略项标签</h5>
              <p>
		张思之：曾以为一国家只要有好的外交或者强大的国防就有面子，后来才明白其实人权才是一个国家最大的面子。···一个政权如果关起门来都不能维护自己本国普通公民的权利，它有什么资格在国际舞台上维护这个国家的权利，它的合法性就会遭到质疑。
	      </p>
              <p><a href="components.html#" class="btn btn-primary">动作</a> <a href="components.html#" class="btn">动作</a></p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="span4">
      <h3>为什么使用缩略项</h3>
      <p>
	缩略项（1.4版之前使用 <code>.media-grid</code> ）适用于栅格化的图片和视频，图片搜索结果，零售产品，文件夹等等。缩略项可以是链接，也可以是静态内容。
      </p>
    </div>
    <div class="span4">
      <h3>简洁灵活的标记</h3>
      <p>
	缩略项标记既简单又灵活&mdash;只须用一个 <code>ul</code> 嵌套多个 <code>li</code> 元素。缩略项内容可以是任何一种HTML内容，只须少许标记。
      </p>
    </div>
    <div class="span4">
      <h3>使用栅格列确定大小</h3>
      <p>
	新版本中，缩略项组件使用栅格类&mdash;诸如 <code>.span2</code> 或 <code>.span3</code> &mdash;确定缩略项的尺寸。
      </p>
    </div>
  </div>

  <div class="row">
    <div class="span6">
      <h2>标记</h2>
      <p>
	正如之前所提到的，缩略项所需的标记是很少的。下面就是一个 <strong>带链接图象</strong> 的默认设置：
      </p>
<pre class="prettyprint linenums">
&lt;ul class="thumbnails"&gt;
  &lt;li class="span3"&gt;
    &lt;a href="#" class="thumbnail"&gt;
      &lt;img src="http://placehold.it/260x180" alt=""&gt;
    &lt;/a&gt;
  &lt;/li&gt;
  ...
&lt;/ul&gt;
</pre>
      <p>
	缩略项中的HTML内容仅须更改少许标记。将 <code>&lt;a&gt;</code> 变成 <code>&lt;div&gt;</code> 即可定制块状内容，如下：
      </p>
<pre class="prettyprint linenums">
&lt;ul class="thumbnails"&gt;
  &lt;li class="span3"&gt;
    &lt;div class="thumbnail"&gt;
      &lt;img src="http://placehold.it/260x180" alt=""&gt;
      &lt;h5&gt;缩略项标签&lt;/h5&gt;
      &lt;p&gt;缩略项标题介绍&lt;/p&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  ...
&lt;/ul&gt;
</pre>
    </div>
    <div class="span6">
      <h2>更多例子</h2>
      <p>
	尝试更多栅格类，混用不同的尺寸。
      </p>
      <ul class="thumbnails">
        <li class="span4">
          <a href="components.html#" class="thumbnail">
            <img src="http://placehold.it/360x268" alt="">
          </a>
        </li>
        <li class="span2">
          <a href="components.html#" class="thumbnail">
            <img src="http://placehold.it/160x120" alt="">
          </a>
        </li>
        <li class="span2">
          <a href="components.html#" class="thumbnail">
            <img src="http://placehold.it/160x120" alt="">
          </a>
        </li>
        <li class="span2">
          <a href="components.html#" class="thumbnail">
            <img src="http://placehold.it/160x120" alt="">
          </a>
        </li>
        <li class="span2">
          <a href="components.html#" class="thumbnail">
            <img src="http://placehold.it/160x120" alt="">
          </a>
        </li>
        <li class="span2">
          <a href="components.html#" class="thumbnail">
            <img src="http://placehold.it/160x120" alt="">
          </a>
        </li>
      </ul>
    </div>
  </div>

</section>



<!-- Alerts & Messages
================================================== -->
<section id="alerts">
  <div class="page-header">
    <h1>通知 <small>给成功，警告和错误消息指定样式</small></h1>
  </div>

  <h2>简洁的默认样式</h2>
  <div class="row">
    <div class="span4">
      <h3>重写过的基类</h3>
      <p>
	Bootstrap 2 简化了基类，用 <code>.alert</code> 代替了 <code>.alert-message</code> 。
	并对最低要求的标记也进行了精简&mdash;默认只使用 <code>&lt;div&gt;</code> ，而无须嵌套 <code>&lt;p&gt;</code> 。
      </p>
      <h3>统一后的通知消息</h3>
      <p>
	为了得到代码少而质量高的组件，我们统一了块状通知和普通通知的外观。原有的块状样式类被命名为 <code>.alert-block</code> ，其padding更大，通常容纳文本也更多。
      </p>
      <hr>
      <h3>与javascript配合良好</h3>
      <p>
	Bootstrap用一个很好的jQuery插件驱动通知消息，方便用户快速地关闭通知。
      </p>
      <p><a class="btn js-btn" href="javascript.html#alerts">Get the plugin &raquo;</a></p>
    </div>
    <div class="span8">
      <h3>通知的例子</h3>
      <p>
	在div中嵌套信息，并放置一个关闭图标。
      </p>
      <div class="alert">
        <a class="close" data-dismiss="alert">&times;</a>
        <strong>外交部警告！</strong> 不要拿法律当挡箭牌。
      </div>
<pre class="prettyprint linenums">
&lt;div class="alert"&gt;
  &lt;a class="close" data-dismiss="alert"&gt;&times;&lt;/a&gt;
  &lt;strong&gt;警告！&lt;/strong&gt; 不要拿法律当挡箭牌。
&lt;/div&gt;
</pre>
      <p>
	进度条有两个效果加强类：
	<code>.alert-block</code> 用于提供更大padding，适合容纳更多文本组件；而 <code>.alert-heading</code> 用以修饰标题。
      </p>
      <div class="alert alert-block">
        <a class="close" data-dismiss="alert">&times;</a>
        <h4 class="alert-heading">外交部警告！</h4>
        <p>
	  中方强调，中国是法治国家，任何公民的合法权益都受宪法和法律保护，同时任何公民都有义务遵守宪法和法律。
	</p>
      </div>
<pre class="prettyprint linenums">
&lt;div class="alert alert-block"&gt;
  &lt;a class="close" data-dismiss="alert"&gt;&times;&lt;/a&gt;
  &lt;h4 class="alert-heading"&gt;Warning!&lt;/h4&gt;
  Best check yo self, you're not...
&lt;/div&gt;
</pre>
    </div>
  </div>

  <h2>语境下的强化 <small>根据通知的涵义使用不同的类</small></h2>
  <div class="row">
    <div class="span4">
      <h3>危险/错误</h3>
      <div class="alert alert-error">
        <a class="close" data-dismiss="alert">&times;</a>
        <strong>前进进！</strong> 紧密团结在以希特勒元首为核心的纳粹党中央周围，高举国家意志和民族利益的大旗，直达人间地狱。
      </div>
<pre class="prettyprint linenums">
&lt;div class="alert alert-error"&gt;
  ...
&lt;/div&gt;
</pre>
    </div>
    <div class="span4">
      <h3>成功</h3>
      <div class="alert alert-success">
        <a class="close" data-dismiss="alert">&times;</a>
        <strong>钱贱贱！</strong> 紧密团结在以胡锦涛同志为核心的党中央周围，高举科学发展观大旗，为建设有中国特色的社会主义事业前腐后继。
      </div>
<pre class="prettyprint linenums">
&lt;div class="alert alert-success"&gt;
  ...
&lt;/div&gt;
</pre>
    </div>
    <div class="span4">
      <h3>信息</h3>
      <div class="alert alert-info">
        <a class="close" data-dismiss="alert">&times;</a>
        <strong>杀尽尽！</strong> 紧密团结在以斯大林同志为核心的苏共中央周围，高举马列2B主义大旗，加速实现共产主义。
      </div>
<pre class="prettyprint linenums">
&lt;div class="alert alert-info"&gt;
  ...
&lt;/div&gt;
</pre>
    </div>
  </div>

</section>



<!-- Progress bars
================================================== -->
<section id="progress">
  <div class="page-header">
    <h1>进度条 <small>用于载入，重定向或表示动作状态</small></h1>
  </div>

  <h2>例子和标记</h2>
  <div class="row">
    <div class="span4">
      <h3>基本效果</h3>
      <p>
	默认的垂直渐变进度条。
      </p>
      <div class="progress">
        <div class="bar" style="width: 60%;"></div>
      </div>
<pre class="prettyprint linenums">
&lt;div class="progress"&gt;
  &lt;div class="bar"
       style="width: 60%;"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
    </div>
    <div class="span4">
      <h3>条纹效果</h3>
      <p>
	使用渐变创建条纹进度条（不支持IE）
      </p>
      <div class="progress progress-striped">
        <div class="bar" style="width: 20%;"></div>
      </div>
<pre class="prettyprint linenums">
&lt;div class="progress progress-striped"&gt;
  &lt;div class="bar"
       style="width: 20%;"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
    </div>
    <div class="span4">
      <h3>动画效果</h3>
      <p>
	条纹进度条的动果效果（不支持IE）
      </p>
      <div class="progress progress-striped active">
        <div class="bar" style="width: 45%"></div>
      </div>
<pre class="prettyprint linenums">
&lt;div class="progress progress-striped
     active"&gt;
  &lt;div class="bar"
       style="width: 40%;"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
    </div>
  </div>

  <h2>选项和浏览器支持</h2>
  <div class="row">
    <div class="span3">
      <h3>其他颜色</h3>
      <p>
	进度条使用和按钮/警告类相似的样式，提供一致的颜色风格。
      </p>

      <code>.progress-info</code>
      <div class="progress progress-info" style="margin:2px 0 9px 0;">
        <div class="bar" style="width: 20%"></div>
      </div>
      <code>.progress-success</code>
      <div class="progress progress-success" style="margin:2px 0 9px 0;">
        <div class="bar" style="width: 40%"></div>
      </div>
      <code>.progress-warning</code>
      <div class="progress progress-warning" style="margin:2px 0 9px 0;">
        <div class="bar" style="width: 60%"></div>
      </div>
      <code>.progress-danger</code>
      <div class="progress progress-danger" style="margin:2px 0 9px 0;">
        <div class="bar" style="width: 80%"></div>
      </div>
    </div>
     <div class="span3">
      <h3>条纹滚动条</h3>
      <p>
	与纯色相似，也可以使用多色的条纹进度条。
      </p>
      <code>.progress-info</code>
      <div class="progress progress-info progress-striped" style="margin:2px 0 9px 0;">
        <div class="bar" style="width: 20%"></div>
      </div>
      <code>.progress-success</code>
      <div class="progress progress-success progress-striped" style="margin:2px 0 9px 0;">
        <div class="bar" style="width: 40%"></div>
      </div>
      <code>.progress-warning</code>
      <div class="progress progress-warning progress-striped" style="margin:2px 0 9px 0;">
        <div class="bar" style="width: 60%"></div>
      </div>
      <code>.progress-danger</code>
      <div class="progress progress-danger progress-striped" style="margin:2px 0 9px 0;">
        <div class="bar" style="width: 80%"></div>
      </div>
    </div>
    <div class="span3">
      <h3>行为</h3>
      <p>
	进度条使用CSS3过渡效果，因此用javascript动态调整进度条宽度时，效果会非常平滑。
      </p>
      <p>
	如果使用 <code>.active</code> ，那么 <code>.progress-striped</code> 导航栏就会呈现自左向右的条纹跑马灯动画效果。
      </p>
    </div>
    <div class="span3">
      <h3>浏览器支持</h3>
      <p>
	进度条使用CSS3渐变/过渡/动画以实现所有效果。IE7到IE9，以及某些老版本的Firefox还不能完全支持这些特性。
      </p>
      <p>
	目前，Opera和IE还不支持动画效果。
      </p>
    </div>
  </div>

</section>





<!-- Miscellaneous
================================================== -->
<section id="misc">
  <div class="page-header">
    <h1>杂项 <small>轻量级的工具组件</small></h1>
  </div>
  <div class="row">
    <div class="span4">
      <h2>消息墙</h2>
      <p>
	用来给某个元素添加包框效果。
      </p>
      <div class="well">
	来看呀来看呀，这就是消息墙！
      </div>
<pre class="prettyprint linenums">
&lt;div class="well"&gt;
  ...
&lt;/div&gt;
</pre>
    </div><!--/span-->
    <div class="span4">
      <h2>关闭图标</h2>
      <p>
	象对话框和弹出框一样，用常见的叉叉图标关闭内容。
      </p>
      <p><a class="close" style="float: none;">&times;</a></p>
<pre class="prettyprint linenums">&lt;a class="close"&gt;&amp;times;&lt;/a&gt;</pre>
    </div><!--/span-->
  </div><!--/row-->
</section>


     <!-- Footer
      ================================================== -->
      <footer class="footer"> 
	<p class="pull-right"><a href="components.html#">回到顶端</a></p>
        <p>我们倾注世间之爱于设计与创作 <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>，由<a href="http://weibo.com/tvlikedev">Tvlike.me/TV来客开发者</a>翻译</p>
        <p>开源依照 <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a> 发布。 文档依照 <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a> 发布。</p>
        <p>Icons取自 <a href="http://glyphicons.com">Glyphicons Free</a>，授权依照 <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>。</p>
      </footer>

    </div><!-- /container -->



    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> -->
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/bootstrap-transition.js"></script>
    <script src="assets/js/bootstrap-alert.js"></script>
    <script src="assets/js/bootstrap-modal.js"></script>
    <script src="assets/js/bootstrap-dropdown.js"></script>
    <script src="assets/js/bootstrap-scrollspy.js"></script>
    <script src="assets/js/bootstrap-tab.js"></script>
    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>
    <script src="assets/js/bootstrap-button.js"></script>
    <script src="assets/js/bootstrap-collapse.js"></script>
    <script src="assets/js/bootstrap-carousel.js"></script>
    <script src="assets/js/bootstrap-typeahead.js"></script>
    <script src="assets/js/application.js"></script>


  </body>
</html>
